<script setup lang="ts">
import useStore from '@/store/index'
import {OtherStatisticDto} from "@/ts/entityTypes.ts";
import {onMounted, ref} from "vue";
import {getOtherStatisticsApi} from "@/api/statisticsApi.ts";
import {ElMessage} from "element-plus";

const store = useStore()
store.homeTitle = '其他数据统计'

let description = ref<OtherStatisticDto>({
  totalNum: 0,
  goodNum: 0,
  capitalCoverage: 0,
  cityCoverage: 0
})

const initData = async () =>{
  let res = await getOtherStatisticsApi().catch((err) => {
    ElMessage.error(err)
  })
  if (res?.data.code == 200) {
    description.value = res.data.data
  } else {
    ElMessage.error(res?.data.msg)
  }
}

onMounted(async () => {
  await initData()
})
</script>

<template>
<div class="main-box">
  <el-descriptions
      title="其他数据统计"
      :column="1"
      style="width: 75%; margin-top: 2rem"
      direction="horizontal"
      border
  >
    <el-descriptions-item :span="2"  label="空气质量检测总数">
      {{description?.totalNum}}&ensp;&ensp;&ensp;&ensp;&ensp;
      &ensp;&ensp;&ensp;
    </el-descriptions-item>
    <el-descriptions-item label="空气质量良好数量">
      {{description?.goodNum}}
    </el-descriptions-item>
    <el-descriptions-item label="省会城市网格覆盖范围">
    {{ (description?.capitalCoverage*100).toFixed(2).concat('%') }}
  </el-descriptions-item>
  <el-descriptions-item label="大城市网格覆盖范围">
    {{ (description?.cityCoverage*100).toFixed(2).concat('%') }}
  </el-descriptions-item>
  </el-descriptions>
</div>
</template>

<style scoped>
@import "../css/main-components.css";
</style>
